<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/global.js"></script>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
			<legend>系統功能模块维护</legend>
		</fieldset>
		<!--顶部工具栏-->
		<script type="text/html" id="topToolbar">
			<!--<button class="layui-btn layui-btn-sm" lay-event="addRole">
				<i class="layui-icon">&#xe608;</i>
				添加角色
			</button>-->
		</script>
		<!--行内工具栏-->
		<script type="text/html" id="lineToolbar">
			<!--
			<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="setPermission">
				<i class="layui-icon">&#xe716;</i>设置权限
			</a>
			<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="addRoot">
				<i class="layui-icon">&#xe716;</i>设置模块
			</a>
			<a class="layui-btn layui-btn-xs" lay-event="update">
				<i class="layui-icon">&#xe642;</i>编辑
			</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
				<i class="layui-icon">&#xe640;</i>删除
			</a>-->
		</script>
		<!--
        	添加角色页面
        -->
        <div id="addPage" style="display: none;">
        	<form class="layui-form" id="addRoleInfo" action="" onsubmit="return false">
        		<input type="hidden" name="token" id="myToken" />
        		<div class="layui-form-item" style="margin-top: 30px;">
				<label class="layui-form-label"><span style="color: red;">*</span>角色名:</label>
					<div class="layui-input-inline">
						<input type="text" placeholder="请输入角色名" name="name"
							lay-verify="required" class="layui-input" />
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-submit="" lay-event="addRole" lay-filter="addRole">
						<i class="layui-icon">&#xe605;</i>保存
					</button>
					<button type="reset" class="layui-btn layui-btn-primary">
						<i class="layui-icon">&#x1006;</i>重置
					</button>
				</div>
        	</form>
        </div>
        <!--
        	修改页面
        -->
        <div id="updatePage" style="display: none;">
        	<form class="layui-form" id="updateRoleInfo" action="" onsubmit="return false" lay-filter="updateForm">
        		<input type="hidden" name="token" id="Token" />
        		<div class="layui-form-item" style="margin-top: 30px;">
				<label class="layui-form-label"><span style="color: red;">*</span>角色名:</label>
					<div class="layui-input-inline">
						<input type="hidden" name="id" />
						<input type="text" placeholder="请输入角色名" name="name"
							lay-verify="required" class="layui-input" />
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-submit="" lay-filter="updateRole">
						<i class="layui-icon">&#xe605;</i>保存
					</button>
					<button type="reset" class="layui-btn layui-btn-primary">
						<i class="layui-icon">&#x1006;</i>重置
					</button>
				</div>
        	</form>
        </div>
        <!--
        	设置模块页面[树模块]
        -->
        <div id="setRootPage" style="display:none;">
        	<div id="treeModules" class="demo-tree demo-tree-box" style="margin: 10px 0 0 80px;"></div>
        	<button class="layui-btn layui-btn-sm" style="margin: 20px 0 0 90px;" id="setRight">
        		<i class="layui-icon">&#xe605;</i>保存设置
        	</button>
        </div>
		<!--
			设置权限页面[树模块]
		-->
		<div id="setPermissionPage" style="display:none;">
			<div id="treePermissions" class="demo-tree demo-tree-box" style="margin: 10px 0 0 80px;"></div>
			<button class="layui-btn layui-btn-sm" style="margin: 20px 0 0 90px;" id="savePermission">
				<i class="layui-icon">&#xe605;</i>保存设置
			</button>
		</div>
	</body>
	<script>
		layui.use(['table','layer','form','tree'],function(){
			var table=layui.table,
			layer=layui.layer,
			form=layui.form,
			tree=layui.tree,
			$=layui.$;
			
			//获取该用户在模块页面拥有的权限
			$.ajax({
				type : "get",
				url : globalData.server+"modules/getPermissionsByModuleId",
				data:{
					id:globalData.getCurPageModuleId()
				},//需要传递到服务端的数据
				dataType:'json',//服务端响应数据类型
				xhrFields: {
					withCredentials: true
				},
				beforeSend: function(request) {
					request.setRequestHeader("token", globalData.getCurToken());
				},
				success : function(res) {
					//转换对象数组
					var permissionids=JSON.parse(globalData.getCurUserPermissions());
					//创建权限对象数组
					var permission_arr={};
					//遍历用户权限id
					for(var i=0;i<permissionids.length;i++){
						
						//遍历该模块的全部权限
						for(var j=0;j<res.length;j++){
							console.log(res[j]);
							 if(permissionids[i]==res[j].permissionid){
							 	permission_arr[i]=res[j];
							 }
						}
					}
					//遍历数据
					$.each(permission_arr,function(n,value){
						switch (value.permissionvalue){
							case 'role:query':
							var tableTarget='<table id="roleTab" class="layui-table" lay-filter="test"></table>';
							$("body").append(tableTarget);
								break;
							case 'role:addRole':
							var button='<button class="layui-btn layui-btn-sm" lay-event="addRole">'+
								'<i class="layui-icon">&#xe608;</i>添加角色</button>';
							$("#topToolbar").append(button);
								break;
							case 'role:setPermissions':
							var button='<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="setPermission">'+
								'<i class="layui-icon">&#xe716;</i>设置权限</a>';
							$("#lineToolbar").append(button);
								break;
							case 'role:setModules':
							var button='<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="addRoot">'+
								'<i class="layui-icon">&#xe716;</i>设置模块</a>';
							$("#lineToolbar").append(button);
							break;
							case 'role:deleteRole':
							var button='<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">'+
								'<i class="layui-icon">&#xe640;</i>删除</a>';
							$("#lineToolbar").append(button);
								break;
							case 'role:updateRole':
							var button='<a class="layui-btn layui-btn-xs" lay-event="update">'+
								'<i class="layui-icon">&#xe642;</i>编辑</a>';
							$("#lineToolbar").append(button);
								break;
						}
					});
					
					//表格渲染
					table.render({
						elem:'#roleTab',
						height:400,
						toolbar:'#topToolbar',
						url:globalData.server+'roles',
						method:'get',
						headers: {token: globalData.getCurToken()},//设置请求头
						title:'角色表',
						page:true,
						id:'roleList',
						cols:[
							[
							{
								title:'序号',
								type:'numbers',
								width:80,
								align:'center'
							},{
								field:'name',
								width:150,
								title:'角色名',
								align:'center'
							},{
								title:'操作',
								width:350,
								align:'center',
								toolbar:'#lineToolbar'
							}
							]
						]
					});
				}
			});
			//globalData.echoPermissions(,"role");
			
			
			//顶部工具栏监听事件
			table.on('toolbar(test)',function(obj){
				switch(obj.event){
					case 'addRole':
						var add_index=layer.open({
							type:1,
							title:'您正在添加角色信息',
							area:['400px','240px'],
							content:$("#addPage"),
							success:function(layero,index){
								//监听提交按钮
								form.on('submit(addRole)',function(obj){
									
									$.ajax({
										type : "post",
										url : globalData.server+"roles",
										data:obj.field,//需要传递到服务端的数据
										dataType:'json',//服务端响应数据类型
										xhrFields: {
											withCredentials: true
										},
										beforeSend: function(request) {
											request.setRequestHeader("token", globalData.getCurToken());
										},
										success : function(res) {
											if(res.success){
												layer.msg('添加成功',{icon:1,time:2000},function(index){
													layer.close(index);
													//关闭窗口并重载
													layer.close(add_index);
													table.reload('roleList');
												});
												
											}else{
												layer.msg('添加失败',{icon:2,time:2000});
											}
									}
									});
									
									return false;
								});
							}
						});
					break;
				}
			});
			
			//行内工具监听事件
			table.on('tool(test)',function(obj){
				var data=obj.data;
				switch(obj.event){
					case 'setPermission':
						var permission_index=layer.open({
							type:1,
							title:'您正在设置角色['+data.name+']的权限',
							content:$('#setPermissionPage'),
							area:['400px','500px']
						});
						//根据用户获取用户的权限树
						$.ajax({
							type : "get",
							url : globalData.server+"roles/getModulesAndPermissionsByRoleId",
							data:{
								id:data.id
							},//需要传递到服务端的数据
							dataType:'json',//服务端响应数据类型
							xhrFields: {
								withCredentials: true
							},
							beforeSend: function(request) {
								request.setRequestHeader("token", globalData.getCurToken());
							},
							success : function(res) {
								tree.render({
									id:'permissionTree',
									elem:'#treePermissions',
									data:res,
									showCheckbox:true
								});
								//设置节点勾选
								//tree.setChecked('setR', res.mids); 
							}
						});
						var permissions_arr;
						//递归获取选中节点的Id
						function getPermissionsChildrenId(node){
							//console.log(node);
							if(node!=null){
								if(node.field=='permissionid'){
									permissions_arr.push(node.id);
								}
								for(var i=0;node.children!=null&&i<node.children.length;i++){
									getPermissionsChildrenId(node.children[i]);
								}
							}
						}
						//给角色设置权限
						$("#savePermission").click(function(){
							permissions_arr=[]
							var nodes=tree.getChecked('permissionTree');
							
							if(nodes.length>0){
								for(var i=0;i<nodes.length;i++){
									getPermissionsChildrenId(nodes[i]);
								}
								console.log(permissions_arr);
							}else{
								layer.msg("请先勾选模块信息再提交！",{icon:2,time:1500});
							}
							
							//保存权限设置
							$.ajax({
								type : "get",
								url : globalData.server+"roles/giveRoleSetPermission",
								data:{
									'permissionids':permissions_arr,
									'id':data.id
								},//需要传递到服务端的数据
								dataType:'json',//服务端响应数据类型
								xhrFields: {
									withCredentials: true
								},
								beforeSend: function(request) {
									request.setRequestHeader("token", globalData.getCurToken());
								},
								success : function(res) {
									if(res.success){
										layer.msg(res.msg,{icon:1,time:1500},function(){
											//tree.reload('permissionTree');
											layer.close(permission_index);
										});
									}else{
										layer.msg(res.msg,{icon:2,time:1500});
									}
								}
							});
							
						});
					break;
					case 'addRoot':
					//获取功能模块树
					$.ajax({
						type : "get",
						url : globalData.server+"roles/getAllModulesByRoleId",
						data:{
							id:data.id
						},//需要传递到服务端的数据
						dataType:'json',//服务端响应数据类型
						xhrFields: {
							withCredentials: true
						},
						beforeSend: function(request) {
							request.setRequestHeader("token", globalData.getCurToken());
						},
						success : function(res) {
							tree.render({
								id:'setR',
								elem:'#treeModules',
								data:res,
								showCheckbox:true
							});
							//设置节点勾选
							//tree.setChecked('setR', res.mids); 
						}
					});
						
						var module_index=layer.open({
							type:1,
							title:'您正在设置角色['+data.name+']的模块',
							content:$('#setRootPage'),
							area:['400px','500px']
						});
						var arr;
						//递归获取选中节点的Id
						function getChildrenId(node){
							if(node!=null){
								arr.push(node.id);
								for(var i=0;node.children!=null&&i<node.children.length;i++){
									getChildrenId(node.children[i]);
								}
							}
						}
						//给角色设置模块
						$("#setRight").click(function(){
							arr=[];
							var nodes=tree.getChecked('setR');
							if(nodes.length>0){
								for(var i=0;i<nodes.length;i++){
									getChildrenId(nodes[i]);
								}
							}else{
								layer.msg("请先勾选模块信息再提交！",{icon:2,time:1500});
							}
							
							//var moduleids=arr;
							//arr=[];
							//console.log("arr"+arr);
							//console.log("moduleids"+moduleids);
							//保存设置
							$.ajax({
								type : "get",
								url : globalData.server+"roles/giveRoleSetModules",
								data:{
									'moduleids':arr,
									'id':data.id
								},//需要传递到服务端的数据
								dataType:'json',//服务端响应数据类型
								xhrFields: {
									withCredentials: true
								},
								beforeSend: function(request) {
									request.setRequestHeader("token", globalData.getCurToken());
								},
								success : function(res) {
									if(res.success){
										layer.msg(res.msg,{icon:1,time:1500},function(){
											//tree.reload('setR');
											layer.close(module_index);
										});
									}else{
										layer.msg(res.msg,{icon:2,time:1500});
									}
								}
							});
							
						});
					break;
					case 'update':
					form.val('updateForm',data);
					var update_index=layer.open({
							type:1,
							title:'您正在修改角色['+data.name+']的信息',
							area:['400px','240px'],
							content:$('#updatePage'),
							success:function(layero,index){
								//监听修改提交
								form.on('submit(updateRole)',function(obj){
									$.ajax({
										type : "put",
										url : globalData.server+"roles",
										data:obj.field,//需要传递到服务端的数据
										dataType:'json',//服务端响应数据类型
										xhrFields: {
											withCredentials: true
										},
										beforeSend: function(request) {
											request.setRequestHeader("token", globalData.getCurToken());
										},
										success : function(res) {
											if(res.success){
												layer.msg(res.msg,{icon:1,time:2000},function(index){
													layer.close(update_index);
													table.reload('roleList');
												});
												
											}else{
												layer.msg(res.msg,{icon:2,time:2000});
											}
									}
									});
								});
							}
						});
					break;
					case 'del':
						layer.confirm('确认删除角色['+data.name+']吗?',{icon:7},function(index){
							layer.close(index);
							$.ajax({
								type : "delete",
								url : globalData.server+"roles",
								data:{
									id:data.id
								},//需要传递到服务端的数据
								dataType:'json',//服务端响应数据类型
								xhrFields: {
									withCredentials: true
								},
								beforeSend: function(request) {
									request.setRequestHeader("token", globalData.getCurToken());
								},
								success : function(res) {
									if(res.success){
										layer.msg(res.msg,{icon:1,time:2000},function(index){
											table.reload('roleList');
										});
										
									}else{
										layer.msg(res.msg,{icon:2,time:2000});
									}
							}
							});
						});
					break;
				}
			});
		});
	</script>
</html>
